<template>
    <div class="container">
        <div class="search-box">
            
            <div class="flex" style="border-top:1px solid #E4E7ED;" >
                <div @click="changeStatus(item.id)" v-for="(item,index) in status" :key="index" :class="'flex-item' + (search.status === item.id ? ' act-item' : '')">
                    {{item.name}}
                    <div v-if="item.num > 0" class="num-tips">{{item.num}}</div>
                </div>
            </div>
        </div>
        <div class="list-box" v-loading="search.loading">
            <div class="empty" v-if="search.list.length === 0" >暂无数据</div>
            <div class="list-item" v-for="(item,index) in search.list" :key="index" @click="toPage('/order/detail/'+item.id)"  >
                <div class="order-title" >订单号：{{item.orderNumber}}</div>
                <div class="status" style="color: #409EFF;" >{{item.stateName}}</div>
                <div class="order-box" v-for="(pro,pIndex) in item.items" :key="pIndex">
                    <img class="order-img" :src="pro.productPic" />
                    <div class="product-title">{{pro.productName}}</div>
                    <div class="product-desc">{{fAttr(pro.skuAttributes)}}</div>
                    <div class="product-desc" style="margin-top:5px;" >门店：{{item.shopName}}</div>
                </div>
                <div class="list-footer">
                    佣金提成：<span style="color:red;" >{{fMoney(null,null,item.commissionAmount)}}</span>
                </div>
                <div class="list-btns" v-if="item.status === 2 && item.orderType === 2" >
                    <el-button @click.stop="showDeliver(index);" type="primary">上传交货凭证</el-button>
                </div>
            </div>
            <div v-if="search.list.length > 0" class="next-btn">
                <div>共{{search.page}}/{{search.totalPage}}页，{{search.totalRow}}条</div>
                <div style="margin-top:10px;" >
                    <span @click="jumpPage(search.page - 1)" >上一页</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span @click="jumpPage(search.page + 1)">下一页</span>
                </div>
            </div>
        </div>

        <el-drawer title="上传交货凭证" :visible.sync="deliver.show" size="400px" direction="btt" :wrapperClosable="false">
            <div style="padding:10px;" >
                <div style="width:100px;height:100px;margin:0 10px 10px 0;position:relative;display:inline-block;" v-for="(item,index) in deliver.images" :key="index">
                    <img style="width:100%;height:100%;"  :src="item" />
                    <el-button @click="deliver.images.splice(index,1)" style="position:absolute;top:0;right:0;" type="text" >删除</el-button>
                </div>
                <Upload v-if="deliver.images.length < 3" style="display:inline-block;" :showTip="false"  @change="uploadSuccess" ></Upload>
            </div>
            <div style="padding:10px;">
                <el-button style="width:100%;" :loading="deliver.loading" @click="confirDeliverEvent"  type="primary" >确认提交</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import Upload from '../common/Upload.vue';
export default {
    components:{Upload},
    data:function(){
        return {
            // 全部：0，待审核：90，待发货：2：租赁中：4，已完成：8，订单取消：13
            status:[
                {id:0,name:'全部',num:0},
                {id:90,name:'待审核',num:0},
                {id:2,name:'待发货',num:0},
                {id:4,name:'租赁中',num:0},
                {id:8,name:'已完成',num:0},
                {id:13,name:'取消',num:0},
            ],
            search:{
                //1：非推荐订单，2：推荐订单
                agentType:'1',
                //1：线上订单，2：线下订单
                orderType:2,
                page:1,
                pageSize:20,
                status:0,
                loading:false,
                list:[],
                totalPage:0,
                totalRow:0
            },
            deliver:{
                show:false,
                orderId:0,
                orderNumber:'',
                images:[]
            }
        };
    },
    created:function(){
        this.loadData();
    },
    methods:{
        changeStatus(status){
            if(this.search.loading){return;}
            this.search.status = status;
            this.emptyAndLoad();
        },
        changeOrderType(agentType,orderType){
            if(this.search.loading){return;}
            this.search.agentType = agentType;
            this.search.orderType = orderType;
            this.emptyAndLoad();
        },
        emptyAndLoad(){
            this.search.page = 1;
            this.loadData();
        },
        jumpPage(page){
            if(this.search.loading || page <= 0 || (this.search.totalPage !== 0 && page > this.search.totalPage)){
                return;
            }
            this.search.page = page;
            this.loadData();
        },
        loadData(){
            var that = this;
            that.search.loading = true;
            that.$api.post('/channel/order/find.json',that.search).then(data =>{
                that.search.loading = false;
                if(data.data.code != '0'){
                    that.$message.error(data.data.msg);
                    return;
                }
                that.search.list = data.data.data.list;
                that.search.totalPage = data.data.data.totalPage;
                that.search.totalRow = data.data.data.totalRow;
                var count = data.data.data.count;
                console.log(count);
                that.status = that.status.map(item => {
                    var key = 's' + item.id;
                    var num = count[key];
                    item.num = num === undefined ? 0 : num; 
                    return item;
                });

            }).catch(()=>{
                that.search.loading = false;
            });
        },
        fAttr(attr){
            try{
                var atVal = JSON.parse(attr);
                return atVal.map(item => {return item.value}).join('/');
            }catch(e){}
        },
        showDeliver(index){
            var row = this.search.list[index];
            this.deliver.orderId = row.id;
            this.deliver.orderNumber = row.orderNumber;
            this.deliver.images = [];
            this.deliver.show = true;
        },
        uploadSuccess(src){
            this.deliver.images.push(src);
        },
        confirDeliverEvent(){
            var that = this;
            if(that.deliver.images.length === 0){
                that.$message.error('最少上传一张照片');
                return ;
            }
            var body = {
                orderId:that.deliver.orderId,
                imageList:that.deliver.images
            }
            that.deliver.loading = true;
            that.$api.post('/channel/order/uploadDeliverGoods.json',body).then(data =>{
                that.deliver.loading = false;
                if(data.data.code != '0'){
                    that.$message.error(data.data.msg);
                    return;
                }
                that.$message.success('提交成功');
                that.deliver.show = false;
            }).catch(()=>{
                that.deliver.loading = false;
            });
        }
    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
    }
    .empty{width: 100%;text-align: center;padding: 40px 0;font-size: 12px;color: #909399;}
    .next-btn{text-align:center;margin-top: 20px;color: #409EFF;}
    .search-box{width: 100%;background: #fff;}
    .flex{width: 100%;display: flex;}
    .flex-item {flex: 1;text-align:center;padding: 10px;font-size: 12px;position: relative;;}
    .num-tips{
        position: absolute;top:0;right:10px;
        display: inline-block;
        color: red;
        font-size: 12px;
        text-align: center;
        border-radius: 50%;
    }
    .act-item{color: #409EFF;}

    .list-box{
        width: 100%;position: relative;
        padding:10px 10px 20px 10px;
    }
    .list-item{
        width: 100%;padding: 10px;background: #fff;
        border-radius: 5px;
        margin-top: 10px;
        position: relative;
    }
    .order-title{
        width: 100%;
        font-weight: 500;
        font-size: 14px;
    }
    .order-box{
        width: 100%;
        min-height: 100px;
        position: relative;
        padding: 0px 0 0px 90px;
        margin-top: 10px;
    }
    .order-box .order-img{
        width: 80px;
        height: 80px;
        position: absolute;
        top:0;left: 0;;
    }
    .order-box .product-title{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        margin-bottom: 10px;
    }
    .order-box .product-desc{
        font-size: 12px;
        color: #909399;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
    }
    .list-item .status{
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .list-footer{
        overflow: hidden;
        font-size: 12px;
    }
    .list-item .list-btns{
        width: 100%;
        position: absolute;
        bottom: 10px;
        right: 10px;
        text-align: right;
    }
    

</style>
